<script setup>
import { BASE_URL } from "../../../utils/api";

// 关卡全部已解锁（实际逻辑已全部开放，无需判断锁定状态）

// 允许玩家点击任意关卡
function goToTheJigsawPuzzles(level) {
  uni.navigateTo({
    url: `/pages/index/JigsawPuzzles/JigsawPuzzles?level=${level}`
  });
}

// 关卡图片的偏移量数组，单位 rpx
const offsetsY = [205, 170, 100, 120, 125, 210, 150, 190, 130];
const offsetsX = [-20, 52, -10, 30, 80, 70, 60, 50, 45];

// 每个关卡图片的宽度数组，单位 rpx
const imageWidths = [110, 70, 70, 70, 50, 50, 70, 90, 80];

// 返回按钮
function goBack() {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<template>
  <view style="height: 100vh;">
    <!-- 背景图 Image 标签 -->
    <image :src="`${BASE_URL}/game/map.jpg`" class="full-screen-background" mode="scaleToFill" />

    <!-- 返回按钮 -->
    <image :src="`${BASE_URL}/game/return.png`" mode="widthFix" class="back-icon" @tap="goBack" @click="goBack">
    </image>

    <view class="flex center map-container">
      <!-- 相对定位的容器 -->
      <view class="level-images-container">

        <!-- 循环生成关卡图片，全部可点击 -->
        <template v-for="(level, index) in 9" :key="level">
          <view class="level-image-wrapper" :style="{
            transform: `translate(${offsetsX[index]}rpx, ${offsetsY[index]}rpx)`,
            width: `${imageWidths[index]}rpx`
          }">
            <image @click="goToTheJigsawPuzzles(level)" :src="`${BASE_URL}/game/level${level}.png`" class="level-image"
              mode="widthFix" />
          </view>
        </template>

      </view>
    </view>
  </view>
</template>

<style scoped>
.full-screen-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.back-icon {
  position: absolute;
  top: 10rpx;
  left: 5rpx;
  width: 25rpx;
  z-index: 999;
  /* 确保在最上层 */
  padding: 20rpx;
  /* 增加点击区域 */
}

.level-images-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.map-container {
  width: 100%;
}

.level-image-wrapper {
  position: relative;
}

.level-image {
  width: 100%;
  height: auto;
}
</style>
